<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      
      <el-form-item label="模块类型">
         <el-select style="width: 150px" v-model="queryParams.pushModule" placeholder="请选择模块类型" clearable @keyup.enter.native="handleQuery" @change="handleChange1">
           <el-option v-for="item in pushModuleList" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
      </el-form-item>

      <el-form-item label="上传类型">
         <el-select style="width: 150px" v-model="queryParams.pushType" placeholder="请选择上传类型" clearable @keyup.enter.native="handleQuery" @change="handleChange2">
           <template v-for="item in pushTypeList">
           <el-option
             v-if="item.display" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </template>
         </el-select>
      </el-form-item>

      <el-form-item label="上传结果">
         <el-select style="width: 150px" v-model="queryParams.pushResult" placeholder="请选择上传结果" clearable @keyup.enter.native="handleQuery">
           <el-option v-for="item in pushResultList" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="pushFailedLogerList" @selection-change="handleSelectionChange">
      <el-table-column label="id" align="center" prop="id" />
	    <el-table-column label="模块类型" align="center" prop="pushModule" />
      <el-table-column label="上报类型" align="center" prop="pushType" />
      <el-table-column label="批次号" align="center" prop="batchId" />
      <el-table-column label="上报总条数" align="center" prop="pushNum" />
      <el-table-column label="上报失败条数" align="center" prop="pushFailureNum" />
      <el-table-column label="上报结果" align="center" prop="pushResult" :formatter="result"/>
      <el-table-column label="请求时间" align="center" prop="pushRequestTime" />
      <el-table-column label="请求数据" align="center" prop="pushInfo" />
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
          <template #default="scope">
              <el-button type="text" icon="view"  @click="openDialog(scope.row)">查看</el-button>
          </template>
    </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />


    <el-dialog title="请求信息" v-model="dialogVisible" width="50%">
      <el-form :model="PushFailedLoger" label-width="100px">
        <el-form-item label="ID">
          <el-input disabled v-model="PushFailedLoger.id"></el-input>
        </el-form-item>
        <el-form-item label="模块类型">
          <el-input disabled v-model="PushFailedLoger.pushModule"></el-input>
        </el-form-item>
        <el-form-item label="上报类型">
          <el-input disabled v-model="PushFailedLoger.pushType"></el-input>
        </el-form-item>
        <el-form-item label="上报总条数">
          <el-input disabled v-model="PushFailedLoger.pushNum"></el-input>
        </el-form-item>
        <el-form-item label="上报失败条数">
          <el-input disabled v-model="PushFailedLoger.pushFailureNum"></el-input>
        </el-form-item>
        <el-form-item label="返回批次号">
          <el-input disabled v-model="PushFailedLoger.batchId"></el-input>
        </el-form-item>
        <el-form-item label="上报结果">
          <el-input disabled v-model="PushFailedLoger.pushResult"></el-input>
        </el-form-item>
        <el-form-item label="请求时间">
          <el-input disabled v-model.number="PushFailedLoger.pushRequestTime"></el-input>
        </el-form-item>
        <el-form-item label="请求信息">
          <el-input type="textarea" disabled v-model="PushFailedLoger.pushInfo"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { listPushFailedLoger} from "@/api/yhpc/PushFailedLoger";

export default {
  name: "CheckTaskItem",
  data() {
    return {
      //弹出对话框的内容
      dialogVisible: false,
      PushFailedLoger: {
        id : "",
        pushModule : "",
        pushType : "",
        batchId : "",
        pushNum : "",
        pushFailureNum : "",
        pushInfo : "",
        pushResult : "",
        pushRequestTime : "",
      },
		// 遮罩层
		loading: true,
		// 选中数组
		ids: [],
		// 非单个禁用
		single: true,
		// 非多个禁用
		multiple: true,
		// 显示搜索条件
		showSearch: true,
		// 总条数
		total: 0,
		// 检查项表格数据
		pushFailedLogerList: [],
		// 弹出层标题
		title: "",
		// 是否显示弹出层
		open: false,
		// 查询参数
		queryParams: {
		pageNum: 1,
		pageSize: 10,
		searchValue: null,
		type: 1,
		},
		// 表单参数
		form: {type:1},
		// 表单校验
		rules: {
		},
    pushModule: '',
    pushType: '',
    // 模块类型数据
    pushModuleList: [
        { label: '双重预防', value: '双重预防' },
         { label: '专项检查', value: '专项检查' },
        { label: '平台报警', value: '平台报警' }
    ],
	  // 上传类型数据
     pushTypeList: [
      { label: '安全风险分析单元', value: '安全风险分析单元', pushModule: '双重预防' },
      { label: '安全风险事件', value: '安全风险事件', pushModule: '双重预防' },
      { label: '安全风险管控措施', value: '安全风险管控措施', pushModule: '双重预防' },
      { label: '安全风险清单', value: '安全风险清单', pushModule: '双重预防' },
      { label: '隐患排查任务记录', value: '隐患排查任务记录', pushModule: '双重预防' },
      { label: '隐患记录和隐患治理用一个接口', value: '隐患记录和隐患治理用一个接口', pushModule: '双重预防' },

      { label: '专项检查隐患信息', value: '专项检查隐患信息', pushModule: '专项检查' },
      { label: '专项检查记录', value: '专项检查记录', pushModule: '专项检查' },

       { label: '上报特殊作业票证信息', value: '上报特殊作业票证信息', pushModule: '平台报警' },
       { label: '上报人员基础信息', value: '上报人员基础信息', pushModule: '平台报警' },
       { label: '上报人员实时定位数据', value: '上报人员实时定位数据', pushModule: '平台报警' },
       { label: '上报视频智能分析数据', value: '上报视频智能分析数据', pushModule: '平台报警' },
       { label: '上报雷电预警设备基础信息', value: '上报雷电预警设备基础信息', pushModule: '平台报警' },
       { label: '上报雷电预警数据', value: '上报雷电预警数据', pushModule: '平台报警' },
       { label: '上报环境监测数据', value: '上报环境监测数据', pushModule: '平台报警' }
          ],
		// 上传结果
    pushResultList: [
        { label: '成功', value: '1' },
        { label: '失败', value: '0' },
    ],
    };
  },
  created() {
    this.getList();
    this.pushTypeList.forEach(item => item.display = true);
    // 模拟从服务器获取的数据
    this.form = {
      name: '张三',
      age: 25,
      gender: 'male',
      hobbies: ['阅读', '音乐']
    };
  },
  methods: {
    openDialog(value) {
      this.dialogVisible = true;
      this.PushFailedLoger = value;
    },
    /** 查询检查项列表 */
    getList() {
      this.loading = true;
      listPushFailedLoger(this.queryParams).then(response => {
        this.pushFailedLogerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleChange1(value) {
      this.pushTypeList.forEach(item => item.display = item.pushModule == value)
      this.pushType = '';
    },
    handleChange2(value) {
      const findProduct = this.pushTypeList.find(item => item.value === value);
      if(findProduct){
        this.pushModule = findProduct.pushModule;
      }
    },
    result(row, column, cellValue){
      if (cellValue == '1') {
        return "成功";
      } else if (cellValue == '0') {
        return "失败";
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
		    checkPlanName: null,
        governCheckName: null,
        governCheckContent: null,
        governCheckWay: null,
		    type: 1,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
	    this.queryParams.type = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {          
      this.pushModule = '';
      this.pushType = '';
      this.pushTypeList.forEach(item => item.display = true)
      this.resetForm("queryForm");
      this.handleQuery();
    }
  }
};
</script>
